<template>
  <div id="t-o-a-s-t">
    <ul>
      <li
        v-for="(item, index) in list"
        :key="index"
        :style="{ opacity: item.isShow ? 1 : 0 }"
        :ref="list.id"
      >
        {{ item.msg }}
      </li>
    </ul>
  </div>
</template>

<script>
// import animate from "@/common/animate";
export default {
  name: "Toast",
  data() {
    return {
      msg: "",
      list: [],
      id: 0,
    };
  },
  methods: {
    show(msg = "默认文字", duration = 1500) {
      let obj = { msg, duration };
      obj.id = this.id;
      obj.isShow = true;
      this.id++;
      this.list.push(obj);

      setTimeout(() => {
        for (let i = 0; i < this.list.length; i++) {
          if (this.list[i].id === obj.id) {
            this.list[i].isShow = false;
            let obj = this.list.find((value) => {
              return value.isShow === true;
            });
            if (!obj) {
              this.list = [];
            }
          }
        }
      }, duration);
    },
  },
};
</script>

<style scoped>
#t-o-a-s-t {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  text-align: center;
}
li {
  margin: 7px 0;
  padding: 5px 10px;
  background-color: rgba(1, 1, 1, 0.7);
  color: #ffffff;
  font-size: 13px;
}
</style>
